সিএসএস মার্জিন

একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।

সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।

এক নজরে সিএসএস মার্জিন প্রোপার্টিসমূহ

margin

একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।

margin-top

লিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-right

এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-bottom

এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-left

এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

পৃথক পৃথক মার্জিন প্রোপার্টিসমূহ

একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-

• margin-top
• margin-right
• margin-bottom
• margin-left

এই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

• auto - ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।
• length - px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
• % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
• inherit - প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।

নিচের উদাহরণে < p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ

kt_satt_skill_example_id=411

মার্জিন - শর্টকাট প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।

নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ

• margin-top
• margin-right
• margin-bottom
• margin-left

kt_satt_skill_example_id=416

উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

• উপরের মার্জিন 50px হবে।
• ডানের মার্জিন 40px হবে।
• নিচের মার্জিন 80px হবে।
• বামের মার্জিন 70px হবে।

যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

• উপরের মার্জিন 50px হবে।
• ডান ও বামের মার্জিন 40px হবে।
• নিচের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

• উপরের এবং নিচের মার্জিন 50px হবে।
• ডানের ও বামের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ

• চার পাশের মার্জিন 50px হবে।

"auto" ভ্যালুর ব্যবহার

একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।

এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।

kt_satt_skill_example_id=419

"inherit" ভ্যালুর ব্যবহার

নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে

এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ

kt_satt_skill_example_id=422

মার্জিন কলাপ্স

এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।

এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।

নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ

kt_satt_skill_example_id=424

এই উদাহরণটিতে < h1> এলিমেন্টের নিচে 60px এবং < h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।

উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, < h1> এবং < h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।